<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-width="120px" style="margin-top: 10px">
        <el-form-item label="备注名" prop="bannerName">
          <el-input v-model="temp.bannerName" style="width: 450px" />
        </el-form-item>
        <el-form-item label="轮播图" prop="bannerImg">
          <el-input v-model="temp.bannerImg" placeholder="图片链接" style="width: 450px" />
          <img-upload-single @onUpload="uploadImg" @onRemove="removeImg" ref="imgUpload" extra-tip="，建议尺寸为750×280"></img-upload-single>
        </el-form-item>
        <el-form-item label="排序权重" prop="bannerRank">
          <el-input-number v-model="temp.bannerRank" :min="0" :step="1" step-strictly style="text-align: center" size="medium" /><span style="color: gray"> (权重数字越大，展示越靠前)</span>
        </el-form-item>
        <el-form-item label="展示位置" prop="bannerPosition">
          <el-select v-model="temp.bannerPosition" style="width: 200px;" class="filter-item">
            <el-option v-for="item in bannerPositionList" :key="item.key" :label="item.value" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="跳转类型" prop="bannerType">
          <el-select v-model="temp.bannerType" style="width: 200px;" class="filter-item" @change="changeBannerType">
            <el-option v-for="item in bannerTypeList" :key="item.key" :label="item.value" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="temp.bannerType===1" label="跳转网页链接" prop="bannerLink">
          <el-input v-model="temp.bannerLink" style="width: 450px">
            <el-select slot="prepend" v-model="netHeader" placeholder="请选择" style="width: 100px">
              <el-option label="http://" value="http://" />
              <el-option label="https://" value="https://" />
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item v-if="temp.bannerType===2" label="选择跳转新闻" prop="bannerLink">
          <el-select
            v-model="temp.bannerLink"
            filterable
            remote
            :remote-method="searchNewsList"
            :loading="selectLoading"
            placeholder="请选择或搜索新闻"
            style="width: 450px"
            clearable
            @clear="initNewsOptions"
          >
            <el-option v-for="item in newsOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left; margin-right: 20px">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="temp.bannerType===3" label="选择跳转商品" prop="bannerLink">
          <el-select
            v-model="temp.bannerLink"
            filterable
            remote
            :remote-method="searchProductList"
            :loading="selectLoading"
            placeholder="请选择或搜索商品"
            style="width: 450px"
            clearable
            @clear="initProductOptions"
          >
            <el-option v-for="item in productOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left; margin-right: 20px">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="saveBanner()" style="margin-left: 120px">
          提交
        </el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { saveBanner, getBanner, searchNews, searchProduct } from '@/api/banner'
import waves from '@/directive/waves' // waves directive
import ImgUploadSingle from '@/components/ImgUpload/ImgUploadSingle'
import { isIntegerNature } from '@/utils/validate'
import { removeHttpHeader } from '@/utils/common'

export default {
  name: 'BannerEdit',
  components: { ImgUploadSingle },
  directives: { waves },
  data() {
    return {
      formLoading: true,
      selectLoading: true,
      temp: {
        bannerId: undefined,
        bannerName: '',
        bannerImg: '',
        bannerLink: '',
        bannerPosition: '',
        bannerRank: 0,
        bannerType: ''
      },
      rules: {
        bannerName: [{ required: true, message: '请填写备注名', trigger: 'blur' }],
        bannerImg: [{ required: true, message: '请上传轮播图', trigger: 'change' }],
        bannerLink: [{ required: true, message: '请填写或选择跳转目标', trigger: 'change' }],
        bannerPosition: [{ required: true, message: '请选择展示位置', trigger: 'change' }],
        bannerRank: [{ required: true, message: '请设置轮播图排序', trigger: 'change' }, { validator: isIntegerNature, trigger: 'blur' }],
        bannerType: [{ required: true, message: '请填写跳转类型', trigger: 'change' }]
      },
      bannerPositionList: [
        { key: 0, value: '首页' },
        { key: 1, value: '维权保障' },
        { key: 2, value: '医疗互助' },
        { key: 3, value: '网上商城首页' },
        { key: 4, value: '爱心帮扶' },
        { key: 5, value: '特价商城' },
        { key: 6, value: '积分商城' },
        { key: 7, value: '职工福利' }
      ],
      bannerTypeList: [
        { key: 0, value: '无跳转' },
        { key: 1, value: '网页跳转' },
        { key: 2, value: '新闻页面' },
        { key: 3, value: '商品页面' },
        { key: 4, value: '答题页面' }
      ],
      netHeader: 'http://',
      newsOptions: [],
      productOptions: []
    }
  },
  created() {
    this.initForm()
  },
  methods: {
    initForm() {
      const bannerId = this.$route.params.id
      if (bannerId == 0) {
        console.log('Hello World!')
      } else {
        this.formLoading = true
        getBanner(bannerId).then(response => {
          this.temp = response.data
          // 初始化跳转选择
          if (this.temp.bannerType === 1) {
            this.temp.bannerLink = removeHttpHeader(this.temp.bannerLink)
          } else if (this.temp.bannerType === 2) {
            this.initNewsOptions()
          } else if (this.temp.bannerType === 3) {
            this.initProductOptions()
          }
          setTimeout(() => {
            this.formLoading = false
          }, 100)
        })
      }
    },
    saveBanner() {
      const data = Object.assign({}, this.temp)
      data.departmentId = this.$store.getters.tmpDepartmentId
      if (this.temp.bannerType === 1) {
        data.bannerLink = '' + this.netHeader + this.temp.bannerLink
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.formLoading = true
          saveBanner(data).then(() => {
            this.$notify({
              title: 'Success',
              message: '提交成功',
              type: 'success',
              duration: 2000
            })
            this.$router.push({ name: 'Banner' })
            this.formLoading = false
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    removeImg() {
      this.temp.bannerImg = ''
    },
    uploadImg() {
      this.temp.bannerImg = this.$refs.imgUpload.url
    },
    changeBannerType(val) {
      this.temp.bannerLink = undefined
      // 生成选项列表
      if (val === 2) {
        this.initNewsOptions()
      } else if (val === 3) {
        this.initProductOptions()
      }
    },
    initNewsOptions() {
      this.selectLoading = true
      searchNews('').then(response => {
        this.newsOptions = response.data
        setTimeout(() => {
          this.selectLoading = false
        }, 100)
      })
    },
    searchNewsList(query) {
      this.selectLoading = true
      searchNews(query).then(response => {
        this.newsOptions = response.data
        setTimeout(() => {
          this.selectLoading = false
        }, 100)
      })
    },
    initProductOptions() {
      this.selectLoading = true
      searchProduct('').then(response => {
        this.productOptions = response.data
        setTimeout(() => {
          this.selectLoading = false
        }, 100)
      })
    },
    searchProductList(query) {
      this.selectLoading = true
      searchProduct(query).then(response => {
        this.productOptions = response.data
        setTimeout(() => {
          this.selectLoading = false
        }, 100)
      })
    }
  }
}
</script>
